const path = require('path')
const buildUtils = require('./buildutils')

function gulptastsCSS($, gulp, buildFolder, browserSync){
  const commitHash = buildUtils.getRevision();

  const postcssAssetsPlugin = () => {
    // 加载打包目录的资源
    return $.postcssAssets({
      loadPaths: [path.join(buildFolder, 'res', 'ui')],
      basePath: buildFolder,
      baseUrl: '.',
      // cachebuster: cachebust
      //   ? (filePath, urlPathname) => ({
      //     // 如果使用了缓存，将使用缓存
      //     pathname: buildUtils.cachebust((urlPathname, commitHash))
      //   })
      //   : ""
    })
  }

  const postcssPlugins = (prod) => {
    // 默认加载插件-资源文件加载路径。
    const plugins = [postcssAssetsPlugin()]
    // 上线环境
    if(prod){
      // 添加更多前缀，如：webkit
      plugins.unshift(
        // $.postcssUnprefix(),
        $.postcssPresetEnv({
          browser: ['> 0.1%']
        })
      )

      plugins.push(
				// 所有css文件最终的顺序是正常的
				$.cssMqpacker({
					sort: true,
				}),
				// 压缩css
				$.cssnano({
					preset: [
						"advanced",
						{
							cssDeclarationSorter: false,
							discardUnused: true,
							mergeIdents: false,
							reduceIdents: true,
							zindex: true,
						},
					],
				}),
				// 将子像素舍入最近的完整像素
				$.postcssRoundSubpixels()
			);
    }

    return plugins;
  }

  function cssTask(key, prod){
    gulp.task(key, () => {
      return (
        gulp
          .src(["../src/css/main.scss"], { allowEmpty: true })
          // 防止gulp插件错误导致退出，这里的作用是，不让写错css就将gulp中断
          .pipe($.plumber())
          .pipe($.sass.sync().on("error", $.sass.logError))
          // 类似babel，将css转换为更加适用的
          .pipe($.postcss(postcssPlugins(prod)))
          .pipe(gulp.dest(buildFolder))
          // 页面更新
          .pipe(browserSync.stream())
      );
    });
  }

  cssTask('css.dev', false);

  cssTask("css.prod", true);
}

module.exports = {
  gulptastsCSS
}